<template>
  <div class="blog-list">
    <div v-for="item in articleList" class="blog-item" :key="item.articleId">
      <h3 class="title"><a :href="'article/detail?articleId='+item.articleId">{{ item.title }}</a></h3>
      <p class="profile">{{item.profile}}</p>
      <div class="blog-info">
        <div class="author">
          作者：{{item.author}}
        </div>
        <div class="apply-time">
          发表时间：{{item.applyTime}}
        </div>
      </div>
      <div class="blog-count">
        <p>阅读量：{{item.readCount}}</p>
      </div>
      <div class="category">
        <el-tag size="mini" style="margin-right: 5px;cursor: pointer;" type="success" offect="dark" v-for="ca in item.categoryList" :key="ca.categoryId">{{ca.categoryName}}</el-tag>
      </div>
    </div>
    <p v-if="noScroll" style="text-align: center;">我是一个有底线的人！！</p>
  </div>
</template>

<script>
export default {
  name: 'ArticleList',
  props: {
    articleList: {
      type: Array
    },
    noScroll: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {}
  }
}
</script>

<style scoped lang="scss">
.blog-list{
  width: 780px;
  .blog-item{
    width: 90%;
    margin: 20px auto 60px;
    .title{
      white-space: nowrap;/*设置文本不换行*/
      overflow: hidden;/*超出部分隐藏*/
      text-overflow: ellipsis;/*溢出部分自动改换为省略号*/
      margin-bottom: 10px;
      a{
        color: black;
        text-decoration: none;
      }
      a:hover{
        color: cornflowerblue;
      }
    }
    .profile{
      display: -webkit-box;/*盒子模型*/
      -webkit-line-clamp: 2;/*设置最多展示2行*/
      -webkit-box-orient: vertical;/*设置子元素的排列方式*/
      overflow: hidden;
      margin-bottom: 10px;
    }
    .blog-info{
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
    }
    .blog-count{
      margin-bottom: 10px;
    }
  }
}
</style>
